<template>
  <div class="add_container">
    添加我要领养
    <div class="content_box">
      <div class="img_box">

        <img src="../../assets/img/want_adopt.jpg" />
      </div>
      <div class="info_box">
        <el-form label-width="85px"
                 :rules="petRulesFrom"
                 ref="petRulesFromRef"
                 :model="petForm"
                 size="small">
          <el-form-item prop="petName"
                        label="标题:">
            <el-input v-model="petForm.petName"></el-input>
          </el-form-item>

          <el-form-item prop="addr"
                        label="地址:">
            <el-input v-model="petForm.addr"></el-input>
          </el-form-item>
          <el-form-item prop="contactName"
                        label="联系人:">
            <el-input v-model="petForm.contactName"></el-input>
          </el-form-item>
          <el-form-item prop="phoneNumber"
                        label="手机:">
            <el-input v-model="petForm.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="详情:">
            <el-input v-model="petForm.detail"
                      type="textarea"
                      :rows="3"
                      class="detail"
                      placeholder="请输入详情：如养宠物经验，喜欢的宠物类型">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn_publish"
                       @click="publish()"
                       type="success">立即发布</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>

  </div>
</template>
<script>
import { addPetInfo } from '../../api/http'
export default {
  data () {
    const isNum = (rule, value, callback) => {
      const id = /^[0-9]*$/
      if (!id.test(value)) {
        callback(new Error('账号只能为数字'))
      } else {
        callback()
      }
    }
    return {
      imageUrl: '',
      // 宠物表单
      petForm: {
        petId: '1000',
        petName: '',
        cateGoryId: 1003,
        addr: '',
        detail: '',
        userId: '',
        contactName: '',
        phoneNumber: ''
      },
      // 宠物表单校验
      petRulesFrom: {
        // 校验密码
        petName: [
          { required: true, message: '宠物姓名为必填项', trigger: 'blur' },//必填项验证
        ],
        //   校验地址
        addr: [
          { required: true, message: '品种为必填项', trigger: 'blur' },//必填项验证
        ],
        // 校验手机号
        phoneNumber: [
          { required: true, message: '手机号为必填项', trigger: 'blur' },//必填项验证
        ],
      }
    }
  },
  methods: {
    //  发布信息
    async publish () {
      this.petForm.userId = window.sessionStorage.getItem("userId")
      const { data: res } = await addPetInfo(this.petForm)
      console.log(res)
      if (res.code == 200) {
        this.petForm.petId = res.data.petId;
        this.$router.push({ path: "/wantAdopt" });
        console.log(res)
        return;
      }
      console.log(res.data)
    }
  },

}
</script>
<style lang="less" scoped>
.add_container {
  width: 100%;
  height: 100%;
  .content_box {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 70%;
    .img_box {
      width: 50%;
      height: 100%;
      // background-color: red;
      text-align: center;

      img {
        height: 100%;
      }

      .avatar-uploader {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(197, 238, 130, 0.342);
        width: 80%;
        height: 65%;
        border: 1px dashed rgb(126, 121, 121);
        .avatar-uploader-icon {
          position: absolute;
          font-size: 50px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          //  background-color: darkcyan;
          color: #8c939d;
          text-align: center;
        }
        .avatar {
          position: absolute;
          font-size: 50px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .info_box {
      width: 50%;
      height: 100%;
      // background-color: cyan;
      .el-form {
        padding-top: 0;
        padding-left: 0px;
        height: 50%;
        width: 30%;
        position: absolute;
        top: 30%;
        transform: translate(0, -50%);
        bottom: 0%;
        box-sizing: border-box;
        .btn_publish {
          width: 100%;
        }
      }
    }
    .detial {
      width: 30%;
      height: 100%;
      // background-color: blueviolet;
      .detail {
        position: relative;
        top: 50%;
        left: 0;
        transform: translate(0, -52%);
        padding: 30px;
        bottom: 0%;
        box-sizing: border-box;
      }
    }
  }
}
</style>